<template>
  <div>
      <el-button plain type="primary" @click="add(0,0)">添加</el-button>
  </div>
  <el-table :data="tableData" row-key="id" style="width: 100% ;height: 77vh;">
    <el-table-column prop="name" label="分类名称" width="auto">
    </el-table-column>
    <el-table-column width="400" label="操作">
      <template #default="scoped">
        <el-button v-if="scoped.row.type === 1" plain type="primary" @click="add(scoped.row.id,scoped.row.level)" >添加下一级</el-button>
        <el-button plain type="primary" @click="update(scoped.row.id)">修改</el-button>
        <el-button plain type="danger" @click="del(scoped.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog 
      :model-value="dialog.show"
      :title="dialog.title"
      width="700px"
      :before-close="handleClose"
      :close-on-click-modal="false">
     <Add
      v-if="dialog.show"
      @getTableData="getTableData"
      v-model:show="dialog.show"
      :id="dialog.id"
      :level="dialog.level"
      :parentId="dialog.parentId"
     />
  </el-dialog>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import Add from './add.vue'
import { ElMessageBox } from 'element-plus'
import path from './path'
let tableData = ref([])
console.dir(tableData)
// 控制消息框的参数
const dialog = reactive({
  show:false,
  title:'',
  id:null,
  parentId:null,
  level:null
});
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  get(path.list,null,content => {
    tableData.value = content
    console.dir(tableData.value)
  })
}
function del(id){
  console.log(id)
  ElMessageBox.confirm("确定要删除该分类吗？",'警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(path.del,{ id: id},content =>{
        getTableData()
      })
  }).catch(()=>{})
}
function add(id,level){
  dialog.title="添加分类"
  dialog.id = null
  dialog.show = true
  dialog.parentId = id
  dialog.level = level
}
function update(id){
  dialog.title="修改分类"
  dialog.id = id
  dialog.show = true
  dialog.level = null
  dialog.parentId = null
}
// 表单关闭事件
function handleClose(){
    // 将表单隐藏
    dialog.show = false
} 

</script>

<style scoped lang='scss'>
</style>